Skip to content

PWA(渐进式 Web 应用)

PWA 不是新框架,而是一套 在浏览器能力上的渐进增强:在支持的客户端上接近 可安装、离线、推送,在不支持的客户端上仍退回普通网页。

核心技术栈

能力技术
离线 / 拦截请求Service Worker
资源与版本缓存Cache API(常与 SW 配合)
结构化离线存储IndexedDB
「添加到主屏幕」、图标与展示模式Web App Manifestmanifest.json
推送(可选)Push API + 服务端订阅

选型优势

  1. 一套 Web 技术栈 覆盖桌面与移动浏览器,减少重复开发(相对纯原生)。
  2. 可安装:主屏幕图标、独立窗口,弱化「网址栏」心智。
  3. 离线可用:弱网或断网仍可看缓存页(需设计离线壳与数据策略)。
  4. 渐进增强:不支持 SW 的用户仍能访问常规站点。
  5. 部署形态:仍是 HTTPS 站点,沿用 Web CI/CD(相对应用商店全量审核模式更轻,但各浏览器安装提示策略不同)。

代价与边界

  1. iOS Safari 对推送、后台同步等能力长期弱于 Chromium,需查最新兼容性。
  2. 缓存一致性:资源更新需版本化(hash 文件名、skipWaiting + clients.claim 策略),否则易出现「老壳包新接口」。
  3. 安全:SW 权限大,必须 全站 HTTPS,且谨慎缓存含用户数据的响应。
  4. 不是原生万能替代:复杂蓝牙、深度系统能力仍可能需原生或小程序。

典型适用场景

  • 工具类、阅读类、仪表盘类:离线可读 + 桌面图标 性价比高。
  • 已有 Web 主战场,希望降低 App 安装摩擦:PWA 作为增量渠道

小结

PWA 适合作为 Web 交付的增强层;是否上线取决于 目标浏览器占比离线/推送是否为核心卖点。实现上优先保证 Manifest + SW 缓存策略清晰,避免过度缓存动态接口。